
<template>
    <div :style="con3">
        <div :style="con2">
            物流管理系统
        </div>
        <div :style="con">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div :style="selfstyle">管理员登录</div>
                <el-form-item prop="num">
                    <el-col :span="8">
                        <el-input type="text" v-model="ruleForm.num" autocomplete="off" placeholder="账号"></el-input>
                    </el-col>

                </el-form-item>

                <el-form-item prop="pass">
                    <el-col :span="8">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="密码"></el-input>
                    </el-col>

                </el-form-item>
                <el-form-item label="验证码" prop="imgCode">
                    <el-col :span="8">
                        <el-input v-model="ruleForm.imgCode" size="small" style="width: 100%;" placeholder="验证码"></el-input>
                    </el-col>
                    <span v-html="captcha" @click="getImg"></span>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">登录</el-button>

                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>

            </el-form>

        </div>
        <Router-view></Router-view>

    </div>
</template>
<script>
import axios from 'axios';
import ElementUI from 'element-ui'
import { login, home } from "@/api/index";
axios.defaults.withCredentials = true;


export default {
    data() {
        var validateImgCode = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入验证码'));
            } else {
                callback();
            }
        };
        var validateNum = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            selfstyle: {
                color: "red",
                marginBottom: "20px",
                marginLeft: "90px",
                marginTop: "60px"

            },
            con3: {
                width: "1400px",
                height: "800px",
                display: "flex"
            },
            con: {
                width: "700px",
                height: "800px",

            },
            con2: {
                width: "700px",
                height: "800px",
                backgroundColor: "blue",
                backgroundImage: 'url(' + require('../../../img/bac.jpg') + ')',
                backgroundRepeat: 'no-repeat',
                backgroundSize: '100% 100%',
                color: 'white',
                fontSize: "50px",
                paddingLeft: "100px",
                paddingTop: "300px"

            },
            captcha: "",
            // imgsrc: "http://localhost:3000/home",
            ruleForm: {
                pass: '',
                num: '',
                imgCode: ""

            },
            rules: {
                imgCode: [
                    { validator: validateImgCode, trigger: 'blur' }

                ],
                num: [
                    { validator: validateNum, trigger: 'blur' }
                ], pass: [
                    { validator: validatePass, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        async getImg() {
            let result = await home();
            this.captcha = result.data;

        },
        async submitForm() {
            console.log(this.ruleForm.imgCode);
            let result = await login({
                username: this.ruleForm.num,
                pwd: this.ruleForm.pass,
                imgCode: this.ruleForm.imgCode,
            })
            console.log(result);
            if (result.data.code == 200) {
                this.$router.push({ name: 'xitong' })
            }
            localStorage["token"] = result.data.token;
            this.getImg();
        },

        async resetForm(formName) {
            await this.$refs[formName].resetFields();
        }
    },
    mounted() {
        this.getImg();
    }

}
</script>


 

<!-- <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <h1>{{ message }}</h1>
    <div v-for="item in chapterList" :key="item.chapterId" class="list">
      {{ item.chapterTitle }}
      {{ item.chapterTime }}
      <span> <button @click="$events => delChapter(item.chapterId)">删除</button></span>

    </div>
    <div>
    
      <input type="text" v-model="chapter" />
      <button @click="addChapter">添加新闻数据</button>
     
    </div>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      message: "",
      chapterList: [],
      chapter: ""
    }
  },
  //页面中调用的方法，或者程序实现逻辑过程中调用的方法
  methods: {
    changeCom() {

    },
    getList() {
      axios.get('http://localhost:3000/getlist').then(res => {
        console.log(res);
        if (res.status == 200) {
          this.chapterList = res.data;
        }
      })
    },
    addChapter() {
    
      axios.post("http://localhost:3000/sub", {
        chapterTitle: this.chapter,
        timer: "2023-3-3"
      }).then(res => {
        console.log(res);
        if (res.data == "ok") {
          this.chapterList.push({
            chapterTitle: this.chapter,
            chapterTime: "2023-3-3",
          })
          console.log(this.chapterList, this.chapter)
        }
      })
    },
    delChapter(id) {
      console.log(id)
      axios.post("http://localhost:3000/del", {
        id: id
      }).then(res => {
        console.log(res);
        if (res.data == "success") {
          console.log("对的")
          let list = this.chapterList.filter((val) => val.chapterId !== id);
          console.log(list);
          this.chapterList = list;
        }

      })
    }

  },
  

  mounted() {
    axios.get("http://localhost:3000/getdata").then(res => {
      console.log(res);
      let result = res.data;
      this.message = result;
    })
    this.getList();


  }

}
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-between;
  color: blue;
  width: 50%;
  margin: 0 auto;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
 -->
